javascript正则表达式替换html字符

Question

我正在使用JavaScript设置输入的值，其中包含可能包含HTML特定字符的文本，例如&  等等。所以，我试图找到一个匹配的正则表达式这些值并分别用适当的值（“＆amp;”，“”）替换它们，只是我无法弄清楚正则表达式。

这是我的尝试：

创建一个包含匹配项的对象和对替换值的引用：

var specialChars = {
  " " : " ",
  "&"  : "&",
  ">"   : ">",
  "&amp;lt;"   : "<"
}

然后，我想匹配我的字符串

var stringToMatch = "This string has special chars & and  "

我试过像

这样的东西

stringToMatch.replace(/( |&)/g,specialChars["$1"]);

但它不起作用。我真的不明白如何捕获特殊标签并替换它。非常感谢任何帮助。

Answer 1

我认为您可以使用稍微不同主题的问题中的函数（Efficiently replace all accented characters in a string?）。

Jason Bunting的回答有一些很好的想法+必要的解释，这是他的解决方案，经过一些修改让你开始（如果你觉得这很有帮助，也可以提出他原来的答案，因为这是他的代码，基本上）。

var replaceHtmlEntites = (function() {
    var translate_re = /&(nbsp|amp|quot|lt|gt);/g,
        translate = {
            'nbsp': String.fromCharCode(160), 
            'amp' : '&', 
            'quot': '"',
            'lt'  : '<', 
            'gt'  : '>'
        },
        translator = function($0, $1) { 
            return translate[$1]; 
        };

    return function(s) {
        return s.replace(translate_re, translator);
    };
})();

可以调用

var stringToMatch = "This string has special chars & and  ";
var stringOutput  = replaceHtmlEntites(stringToMatch);

编号的内容更加容易，你可以使用一点点数学和String.fromCharCode()来更换它们。

---

另一种更简单的可能性就是这样（适用于任何浏览器）

function replaceHtmlEntites(string) {
    var div = document.createElement("div");
    div.innerHTML = string;
    return div.textContent || div.innerText;
}

replaceHtmlEntites("This string has special chars < & >");
// -> "This string has special chars < & >"

Answer 2

另一种方法是创建一个div对象

var tmp = document.createElement("div");

然后将文本分配给其innerHTML

tmp.innerHTML = mySpecialString;

最后阅读元素的文字内容

var output = tmp.textContent || tmp.innerText //for IE compatibility

然后你去......

Answer 3

您可以使用基于功能的替换来执行您想要执行的操作：

var myString = '&'+'nbsp;&'+'nbsp;&tab;©';
myString.replace(/&\w+?;/g, function( e ) {
    switch(e) {
        case ' ': 
            return ' ';
        case '&tab;': 
            return '\t';
        case '©': 
            return String.fromCharCode(169);
        default: 
            return e;
    }
});

但是，我建议你考虑一下你的情况。如果您正在接收＆amp; nbsp;和＆amp;复制;和你的文本值中的其他HTML实体，你真的想要替换它们吗？你之后应该转换它们吗？

要记住一些事情。

干杯！

Answer 4

一种不使用痛苦的开关/案例陈述的现代变体：

const toEscape = `<code> 'x' & "y" </code> <\code>`

toEscape.replace(
  /[&"'<>]/g,
  (char) => ({
      "&": '&amp;',
      "\"": '&quot;',
      "'": '&#39;',
      "<": '&lt;',
      ">": '&gt;',
    })[char]
)

或者，因为这真的应该变成一个函数：

const encodeHTML = function(str) {
    const charsToEncode = /[&"'<>]/g
    const encodeTo = {
      "&": '&amp;',
      "\"": '&quot;',
      "'": '&#39;',
      "<": '&lt;',
      ">": '&gt;',
    }
    return str.replace(charsToEncode, char => encodeTo[char])
}

（此字符列表是根据list of XML-escape-char-codes available on wikipedia选择的。）

Answer 5

替换HTML标签和HTML特殊字符的更好方法是将它们替换为REGEX

str.replace(/<[^>]*>/g, '').replace(/[^\w\s]/gi, '')