我该如何设计这个范围?

时间:2016-01-26 08:26:45

标签: javascript html css

var replacedString = element.innerHTML.replace(selectedString, "<span>" + selectedString + "</span>");

如果我"<span style="color: red">",那么它最终会错误地读取引号而不起作用。

5 个答案:

答案 0 :(得分:2)

要么转义引号,要么使用单引号:

"<span style='color: red'>"

我个人更喜欢使用双/单引号的组合,因为它更具可读性。

答案 1 :(得分:2)

使用'或使用\"转义以启用字符串内的字符串。

所以你可以写"<span style=\"color: red\">""<span style='color: red'>"

这是JSFiddle

答案 2 :(得分:0)

您可以使用单引号:

var replacedString = element.innerHTML.replace(selectedString,
    '<span style="color: red">' + (selectedString) + '</span>');

TLDR :在JavaScript中,对于文字字符串,您可以始终使用“单个qotes”或“双引号”。与例如C#相反,它只允许双重或SQL,它只允许单引号。我实际上经常想知道为什么这是过去。网络工作需要经过深思熟虑,这导致你必须做出另一个选择...更加含糊......

然而有一天我意识到这两个选项允许你在你必须输入一个包含单引号或双引号的字符串时选择'the-other-one'。这是因为一旦你选择了一个引号开头字符,你就可以使用相同的一个来关闭它。所以"this does not work':)。

出于这个原因,您只需输入"this doesn't work",然后'中的don't突然不再是问题。同样,使用'I say: "go learn ecmascript 6!"'解决了在字符串中使用双引号的问题。在我的书中认为这正是他们在JavaScript中添加此选项的原因。

在HTML中,属性值也可以被either single or double quotes包围。然而,在野外看到使用双引号更多,并且恰好在Google's HTML/CSS styleguide中建议,因此对于您的情况,我会选择外部字符串的单引号。

嘻哈:请注意,在新的JavaScript - Ecmascript6中 - 甚至还有第三种选择。您现在可以使用这些引号:``(称为反引号):

`I say: "Don't use ES5 unless you have to"`

但反引号的主要优点是它们指定了“模板字符串”。在模板字符串中,您可以在字符串中嵌入一个或多个变量,而无需手动+ - ing。相反,您使用${..}语法,这种语法更易读,更不容易出错。 或者,看看OP的问题,你现在可以写这个。

let replacedString = element.innerHTML.replace(selectedString,
    `<span style="color: red">${selectedString}</span>`);

ES6在某些浏览器中已经得到支持,最着名的是Chrome,虽然它还不太适合生产(除非你使用transpilation tool

答案 3 :(得分:0)

您也可以使用String.raw。它使用反引号来指定文字。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

答案 4 :(得分:0)

将引号放入JavaScript字符串的四种简单方法:

生成值为<span style='color: red'>的字符串:

您可以在外部使用双引号,在内部使用单引号:

"<span style='color: red'>"

您可以为两者使用单引号,并在内部转义:

'<span style=\'color: red\'>'

生成值为<span style="color: red">的字符串:

您可以在外部使用单引号,在内部使用双引号:

<span style="color: red">'

您可以为两者使用双引号,并在内部转义:

"<span style=\"color: red\">"