Question

句子：蓝先生有一幢蓝房子和一辆蓝色汽车。

JavaScript代码： `

function myFunction(){
var str = document.getElementById("sentence").innerHTML;
for(var i=0; i<str.length;i++){
if(i == 0 )
  {
      var res = str.replace(str.charAt(i+1), "<u>"+str.charAt(i+1)+"</u>");
      document.getElementById("sentence").innerHTML = res;
  }else if(str.charAt(i) == " ")
    {
        var res = str.replace(str.charAt(i+1), "<u>"+str.charAt(i+1)+"</u>");
        document.getElementById("sentence").innerHTML = res;
    }
}`

问题：当按下按钮时，我试图在段落的每个单词中加下下划线。使用代码我只有汽车的C加下划线。如果有人能看到我出错的地方，或者有更好的方法来解决这个问题。

由于

Answer 1

您的代码部分正确。它适用于字符串的每个单词，但是会再次使用下一个单词进行更新。

您可以使用正则表达式来简化。

str.replace(/([^\s]+)/g,function(str){ 
    return "<u>"+str.charAt(0)+"</u>" + str.slice(1);
})

正则表达式的解释：

（：捕获小组开始

[^ ：否定集 - 匹配不在集合中的任何内容。

\ s ：匹配任何空格字符（空格）

] ：设置结束

）：捕获小组结束

查看javascript替换函数的语法：

str.replace(regexp|substr, newSubstr|function)

功能（替换）

要调用以创建要用于的新子字符串的函数   将匹配替换为给定的regexp或substr。争论   提供给此功能的是匹配，子匹配，偏移和   原始字符串。（来源：MDN）

编辑：您仍未在答案中正确使用已接受的解决方案。这就是你的功能现在的样子：

<script>
function myFunction() {
    var str = document.getElementById("Sentence").innerHTML;
    var result = str.replace(/([^\s]+)/g,function(str){
        return "<u>"+str.charAt(0)+"</u>" + str.slice(1);
    });
    document.getElementById("Sentence").innerHTML = result;
}
</script>

如果您对ES6感到满意：

<script>
    function myFunction() {
        const str = document.getElementById("Sentence").innerHTML;
        const result = str.replace(/([^\s]+)/g, p1 => `<u>${p1.charAt(0)}</u>${p1.slice(1)}` );
        document.getElementById("Sentence").innerHTML = result;
    }
</script>

Answer 2

您将变异存储在res中，但您不会更新str，因此在下一次迭代中，先前的更改将被丢弃。相反，只需改变str：

 str = str.replace(str.charAt(i+1), "<u>"+str.charAt(i+1)+"</u>");

然后在循环完成之后将其反映到DOM一次：

 document.getElementById("sentence").innerHTML = str;

我将如何解决这个问题：

   function underline(selector) {
      const el = document.querySelectorAll(selector);
      let result = "";
      for(const word of el.innerHTML.split(" ")) {
        result += `<u>${word[0]}</u>${word.substr(1)}`;
      }
      el.innerHtML = result;
  }

 underline("#sentence");

Answer 3

var str = document.getElementById("sentence").innerHTML;
var words = str.match(/\S*/g);
var words2 = [];
words.forEach(function(item, i, arr) {
   if (item!="") 
   {
      words2.push(item.replace(item.charAt(1), "<u>"+item.charAt(1)+"</a>"));
   }
});
document.getElementById("sentence").innerHTML = words2.join(" ");

Answer 4

谢谢大家的帮助，非常感谢。

完整解决方案：

<!DOCTYPE html>
<html>
<body>

<p id="Sentence">Mr Blue has a blue house and a blue car.</p>

<button onclick="myFunction()">Click</button>

<script>
function myFunction() {
var str = document.getElementById("Sentence").innerHTML;

  var res = str.replace(/([^\s]+)/g,function(str){
    return "<u>"+str.charAt(0)+"</u>" + str.slice(1);
});
      document.getElementById("Sentence").innerHTML = res;

}
</script>

</body>
</html>

JavaScript - 如何为每个单词

4 个答案: