регулярное выражение javascript заменяет символы html

Question

Я использую JavaScript для установки значения ввода с текстом, который может содержать специфичные для HTML символы, такие как &   и т. Д. Итак, я пытаюсь найти одно регулярное выражение, которое будет соответствовать этим значениям, и заменить их с соответствующим значением ("&", "") соответственно, только я не могу понять регулярное выражение, чтобы сделать это.

Вот моя попытка:

Создайте объект, который содержит совпадения и ссылку на значение замены:

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

Тогда я хочу сопоставить свою строку

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

Я пробовал что-то вроде

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

но это не работает. Я не очень понимаю, как захватить специальный тег и заменить его. Любая помощь с благодарностью.

Answer 1

Я думаю, что вы можете использовать функции из вопроса на несколько иную тему ( Эффективно заменить все акцентированные символы в строке? ).

В ответе Джейсона Бантинга есть несколько хороших идей + необходимое объяснение, вот его решение с некоторыми изменениями, чтобы вы начали (, если вы находите это полезным, добавьте также его первоначальный ответ, поскольку это его код, по существу ).

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");

Затем присваиваем текст его внутреннему HTML

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;
    }
});

Однако я настоятельно призываю вас рассмотреть вашу ситуацию. Если вы получаете & NBSP; и & копировать; и другие объекты HTML в ваших текстовых значениях, вы действительно хотите заменить их? Стоит ли потом их конвертировать?

Просто что-то иметь в виду.

Ура!

Answer 4

более лучшим подходом для замены любых тегов HTML и специальных символов HTML было бы просто заменить их на REGEX

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

Answer 5

Современный вариант, в котором не используются болезненные операторы switch / case:

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])
}

(Этот список символов выбирается на основе списка кодов XML-escape-char, доступных в Википедии .)