logo标签列表

JavaScript数组和Split的问题

javascriptarrayshtmlsplit
3
请看下面的代码：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>

            function ttsSpeak(text)
            {

                var textArray = text.split(" ");
                var finalString="";

                for(var i=0;i<textArray.length;i++)
                {
                    finalString = finalString+textArray[i]+"+";
                }

                alert(finalString);
            }
        </script>

    </head>
    <body>
        <div><p id="text">In meteorology surface.
            </p></div>
        <div><button id="speak" onclick="ttsSpeak(document.getElementById('text').innerHTML);">Speak</button></div>
    </body>
</html>

在这里，我期望的输出是：

In+meteorology+surface+

但是我得到了以下内容：

enter image description here

我在这里做错了什么？
6个回答
2
为了帮助您更好地理解，如果您将HTML中的所有空格替换为下划线，您的文本段落看起来会像这样：
<p id="text">In_meteorology_surface.
____________</p>

在文本后换行，并在第二行后添加一堆空格。

您要么在拆分之前修剪文本，要么在可能的多个空格上进行拆分。

此外，您可能不想使用innerHTML，而应该使用textContent。

谢谢回复。我给你点赞！ - PeakGen
2
innerHTML包含所有末尾的空格（即" "）- 这些空格被分割成空字符串（""），然后在末尾连接起来。
通常拆分空格的方法是使用/\s+/（尽可能多地拆分空格），可能会先进行修剪。
"foo     ".split(" ")          // -> ["foo", "", "", "", "", ""]
"foo     ".split(/\s+/)        // -> ["foo", ""]
"foo     ".trim().split(/\s+/) // -> ["foo"]

使用/\s+/也可以隐式地“修复”换行符的问题。
（另外，还可以看看Amadan指出的textContent。）
谢谢回复。我给你点赞！ - PeakGen
1
使用该语句。 
finalString = finalString+textArray[i]+"+";
你在textArray的每个项目后面都添加加号，甚至在最后一次迭代中也是如此。你可以使用join()。

标记

<p id="text">In meteorology surface.
            </p>

如果字符串中包含你不想要的大量空格，请在分割之前调用trim()以移除它们。

alert(text.trim().split(" ").join("+")+"+");
1

如上所述，存在额外的空白。为避免在使用split时出现不可见的空格，您可以在split之前使用trim()函数。

在您的情况下：

text = text.trim();
var textArray = text.split(" ");
谢谢回复。我给你点赞！ - PeakGen
0

你的textArray数组中有元素其值为" "，即一个空格，这是由于（在.和</p>之间）：

<p id="text">In meteorology surface.
            </p>

(如果有n个空格，则您的textArray将有n/2个元素，它们的值只是一个空格；如果n是偶数，则有(n/2 - 1)个元素，它们的值只是一个空格如果n是奇数)

在PHP中，您可以使用array_filter()从数组中删除这些空对象。

在JavaScript中，您可以按如下方式操作：

function isSpace(element){
 if(element != " " || element != "") return element;
}
textArrayWithoutEmptyObjects = textArray.filter(isSpace));

关于 JavaScript 中数组筛选的更多阅读，请点击这里

0
在for循环中，你可以写成finalString = finalString+textArray[i]+"+"，这样就能得到你期望的输出结果。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接