Расшифровать & amp; вернуться к & в JavaScript

230

У меня есть такие строки, как

var str = 'One &amp; two &amp; three';

визуализируется в HTML веб-сервером. Мне нужно преобразовать эти строки в

'One & two & three'

В настоящее время это то, что я делаю (с помощью jQuery):

$(document.createElement('div')).html('{{ driver.person.name }}').text()

Однако у меня тревожное чувство, что я делаю это неправильно. я пытался

unescape("&amp;")

но это, похоже, не работает, как и decodeURI / decodeURIComponent.

Есть ли другие, более родные и элегантные способы сделать это?

javascript html text decode Искусство
источник

Кажется, что огромная функция, включенная в эту статью, работает нормально: blogs.msdn.com/b/aoakley/archive/2003/11/12/49645.aspx Я не думаю, что это самое умное решение, но оно работает.

Матиас

1

Поскольку строки, содержащие сущности HTML, отличаются от строк в кодировке escape d или URI , эти функции работать не будут.

Марсель Корпель

1

@Matias отмечает, что новые именованные объекты были добавлены в HTML (например, через спецификацию HTML 5) с тех пор, как эта функция была создана в 2003 году - например, она не распознает &zopf;. Это проблема с развивающейся спецификацией; как таковой, вы должны выбрать инструмент, который на самом деле поддерживается, чтобы решить его с помощью.

Марк Эмери

1

@MarkAmery да, я полностью согласен! Это хороший опыт, чтобы вернуться к этим вопросам через пару лет, спасибо!

Матиас

105

Более современным вариантом для интерпретации HTML (текста и других) из JavaScript является поддержка HTML в DOMParserAPI ( см. Здесь в MDN). ). Это позволяет использовать собственный анализатор HTML браузера для преобразования строки в документ HTML. Он поддерживается в новых версиях всех основных браузеров с конца 2014 года.

Если мы просто хотим декодировать некоторый текстовый контент, мы можем поместить его в качестве единственного содержимого в теле документа, проанализировать документ и извлечь его .body.textContent.

var encodedStr = 'hello &amp; world';

var parser = new DOMParser;
var dom = parser.parseFromString(
    '<!doctype html><body>' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

Развернуть фрагмент

Мы можем видеть в проекте спецификации,DOMParser что JavaScript не включен для проанализированного документа, поэтому мы можем выполнить это преобразование текста без проблем с безопасностью.

parseFromString(str, type)Метод должен выполнить следующие действия, в зависимости от типа :

"text/html"

Parse str с HTML parserи вернуть только что созданноеDocument .

Флаг сценария должен быть установлен на «отключен».

НОТА
scriptэлементы помечаются как неисполняемые, а содержимое noscriptразбирается как разметка.

Этот вопрос выходит за рамки этого вопроса, но, пожалуйста , обратите внимание, что если вы берете проанализированные узлы DOM (а не только их текстовое содержимое) и перемещаете их в DOM документа, работающего в режиме реального времени, возможно, что их сценарии будут повторно включены, и может быть проблемы безопасности. Я не исследовал это, поэтому, пожалуйста, будьте осторожны.

Джереми Бэнкс
источник

5

любая альтернатива для NodeJs?

coderInrRain

285

Вам нужно декодировать все закодированные сущности HTML или только &себя?

Если вам нужно только обработать, &то вы можете сделать это:

var decoded = encoded.replace(/&amp;/g, '&');

Если вам нужно декодировать все сущности HTML, вы можете сделать это без jQuery:

var elem = document.createElement('textarea');
elem.innerHTML = encoded;
var decoded = elem.value;

Пожалуйста, обратите внимание на комментарии Марка ниже, которые выделяют дыры в безопасности в более ранней версии этого ответа и рекомендуют использовать, textareaа не divсмягчать против потенциальных уязвимостей XSS. Эти уязвимости существуют независимо от того, используете ли вы jQuery или простой JavaScript.

LukeH
источник

16

Осторожно! Это потенциально небезопасно. Если encoded='<img src="bla" onerror="alert(1)">'тогда фрагмент выше покажет предупреждение. Это означает, что если ваш закодированный текст поступает от пользователя, его декодирование с помощью этого фрагмента может представлять уязвимость XSS.

Марк Амери

@MarkAmery Я не эксперт по безопасности, но похоже, что если сразу nullпосле получения текста установить div , оповещение в img не сработает

jsfiddle.net/Mottie/gaBeb/128

4

@ Обратите внимание, что браузер, который у вас работал, alert(1)все еще работает для меня в Chrome на OS X. Если вы хотите безопасный вариант этого хака, попробуйте использоватьtextarea .

Марк Амери

+1 для простого регулярного выражения заменить альтернативу только для одного вида HTML-сущности. Используйте это, если вы ожидаете, что html-данные будут интерполированы, скажем, из приложения Python-флаконов в шаблон.

OzzyTheGiant

Как это сделать на сервере Node?

Мохаммад Кермани

44

У Матиаса Биненса есть библиотека для этого: https://github.com/mathiasbynens/he

Пример:

console.log(
    he.decode("J&#246;rg &amp J&#xFC;rgen rocked to &amp; fro ")
);
// Logs "Jörg & Jürgen rocked to & fro"

Я предпочитаю отдавать предпочтение этому хаку, включая установку HTML-содержимого элемента и последующее чтение его текстового содержимого. Такие подходы могут работать, но они обманчиво опасны и представляют возможности XSS, если они используются для ненадежного пользовательского ввода.

Если вы действительно не можете загрузить библиотеку, вы можете использовать textareaхак, описанный в этом ответе, для почти дублированного вопроса, который, в отличие от предложенных различных похожих подходов, не имеет дыр в безопасности, о которых я знаю:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

Но обратите внимание на проблемы безопасности, затрагивающие сходные подходы к этому, которые я перечислю в связанном ответе! Этот подход является хакерским, и будущие изменения в допустимом содержимом textarea(или ошибках в определенных браузерах) могут привести к тому, что код, который полагается на него, однажды вдруг обнаружит дыру в XSS.

Марк Эмери
источник

Библиотека Матиаса Биненса heпросто великолепна! Большое спасибо за рекомендацию!

Педро А

23

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&amp;'     :   '&',
            '&gt;'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

Это из исходного кода ExtJS.

Вайкит кунг
источник

4

-1; это не в состоянии справиться с подавляющим большинством именованных организаций. Например, htmlEnDecode.htmlDecode('€')должен вернуться '€', но вместо этого возвращается '€'.

Марк Амери

17

element.innerText также делает трюк.

avg_joe
источник

15

Вы можете использовать функцию unescape / escape Lodash https://lodash.com/docs/4.17.5#unescape

import unescape from 'lodash/unescape';

const str = unescape('fred, barney, &amp; pebbles');

ул станет 'fred, barney, & pebbles'

Я это я
источник

1

вероятно, лучше сделать "импорт _unescape из 'lodash / unescape';" так что это не противоречит устаревшей функции javascript с тем же именем:

unescape

14

В случае, если вы ищете его, как я - тем временем есть хороший и безопасный метод JQuery.

https://api.jquery.com/jquery.parsehtml/

Вы можете, например, введите это в вашей консоли:

var x = "test &amp;";
> undefined
$.parseHTML(x)[0].textContent
> "test &"

Таким образом, $ .parseHTML (x) возвращает массив, и если в вашем тексте есть разметка HTML, то значение array.length будет больше 1.

cslotty
источник

Отлично сработало для меня, это было именно то, что я искал, спасибо.

Джонатан Нильсен

1

Если xимеет значение <script>alert('hello');</script>выше, произойдет сбой. В текущем jQuery он на самом деле не будет пытаться запустить скрипт, но [0]даст результат, undefinedтак что вызов textContentзавершится неудачно, и ваш скрипт остановится на этом. $('<div />').html(x).text();выглядит безопаснее - через gist.github.com/jmblog/3222899

Эндрю Ходжкинсон

@AndrewHodgkinson да, но вопрос был «Расшифровать и обратно в JavaScript» - так что вы сначала протестируете содержимое x или убедитесь, что используете его только в правильных случаях.

cslotty

Я действительно не вижу, как это следует. Код выше работает во всех случаях. И как именно вы «убедитесь», что значение х необходимо исправить? А что если в приведенном выше примере скрипта появилось предупреждение & amp; так что это действительно нужно исправить? Мы понятия не имеем, откуда берутся строки OP, поэтому необходимо учитывать злонамеренный ввод.

Эндрю Ходжкинсон

@AndrewHodgkinson Мне нравится ваше мнение, но здесь вопрос не в этом. Не стесняйтесь ответить на этот вопрос, хотя. Я думаю, вы могли бы удалить теги сценария, например.

cslotty

8

JQuery будет кодировать и декодировать для вас. Однако вам нужно использовать тег textarea, а не div.

var str1 = 'One & two & three';
var str2 = "One &amp; two &amp; three";
  
$(document).ready(function() {
   $("#encoded").text(htmlEncode(str1)); 
   $("#decoded").text(htmlDecode(str2));
});

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $('<textarea/>').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="encoded"></div>
<div id="decoded"></div>

Развернуть фрагмент

Джейсон Уильямс
источник

2

-1 потому что здесь есть (удивительная) дыра в безопасности для старых версий jQuery, некоторые из которых, вероятно, все еще имеют значительную пользовательскую базу - эти версии будут обнаруживать и явно оценивать скрипты в передаваемом HTML-коде .html(). Таким образом, даже использования textareaнедостаточно для обеспечения безопасности здесь; Я предлагаю не использовать jQuery для этой задачи и писать эквивалентный код с простым API DOM . (Да, это старое поведение jQuery безумно и ужасно.)

Марк Эмери

Спасибо, что указали на это. Тем не менее, вопрос не включает в себя требование проверять наличие скриптов. Вопрос, в частности, задается относительно HTML, отображаемого веб-сервером. Содержание HTML, сохраненное на веб-сервере, вероятно, должно быть проверено на наличие скриптов перед сохранением.

Джейсон Уильямс

4

Сначала создайте <span id="decodeIt" style="display:none;"></span>где-нибудь в теле

Затем присвойте строку, которая будет декодирована как innerHTML:

document.getElementById("decodeIt").innerHTML=stringtodecode

В заключение,

stringtodecode=document.getElementById("decodeIt").innerText

Вот общий код:

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

Infoglaze.com
источник

1

-1; это опасно небезопасно для использования на ненадежных данных. Например, рассмотрим, что произойдет, если stringtodecodeсодержит что-то вроде <script>alert(1)</script>.

Марк Амери

2

решение JavaScript, которое ловит общие:

var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
str = str.replace(/&([^;]+);/g, (m, c) => map[c])

это обратная сторона https://stackoverflow.com/a/4835406/2738039

Питер Брандт
источник

Если вы используете map[c] || ''нераспознанные, они не будут отображаться какundefined

Eldelshell

Очень ограниченный охват; -1.

Марк Амери

2

+1, больше

unescapeHtml(str){     var map = {amp: '&', lt: '<', le: '≤', gt: '>', ge: '≥', quot: '"', '#039': "'"}     return str.replace(/&([^;]+);/g, (m, c) => map[c]|| '')   }

Trần Quốc Hoài new 2015

Ручное покрытие. Не рекомендуется.

Серхио А.

2

Для однострочных парней:

const htmlDecode = innerHTML => Object.assign(document.createElement('textarea'), {innerHTML}).value;

console.log(htmlDecode('Complicated - Dimitri Vegas &amp; Like Mike'));

Нин Фам
источник

2

Вопрос не определяет происхождение, xно имеет смысл защищать, если мы можем, от злонамеренного (или просто неожиданного, из нашего собственного приложения) ввода. Например, предположим, xимеет значение & <script>alert('hello');</script>. Безопасный и простой способ справиться с этим в jQuery:

var x    = "&amp; <script>alert('hello');</script>";
var safe = $('<div />').html(x).text();

// => "& alert('hello');"

Найдено через https://gist.github.com/jmblog/3222899 . Я не вижу много причин, чтобы избегать использования этого решения, поскольку оно, по крайней мере, такое же короткое, если не короче, чем некоторые альтернативы и обеспечивает защиту от XSS.

(Первоначально я разместил это как комментарий, но добавляю его как ответ, поскольку последующий комментарий в той же ветке попросил меня сделать это).

Эндрю Ходжкинсон
источник

1

Я попробовал все, чтобы удалить & из массива JSON. Ни один из приведенных выше примеров, но https://stackoverflow.com/users/2030321/chris не дал отличного решения, которое привело меня к решению моей проблемы.

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

Я не использовал, потому что я не понимал, как вставить его в модальное окно, которое вытягивало данные JSON в массив, но я попробовал это на основе примера, и это сработало:

var modal = document.getElementById('demodal');
$('#ampersandcontent').text(replaceAll(data[0],"&amp;", "&"));

Мне нравится это, потому что это было просто, и это работает, но не уверен, почему это не широко используется. Искал привет и низ, чтобы найти простое решение. Я продолжаю искать понимание синтаксиса и есть ли риск его использования. Пока не нашли ничего.

Digexart
источник

Ваше первое предложение немного сложнее, но оно работает без особых усилий. Второй, с другой стороны, использует только грубую силу для декодирования символов; это означает, что для выполнения полной функции декодирования может потребоваться МНОГО усилий и времени. Вот почему никто не использует этот способ для решения проблемы ОП.

Серхио А.

Расшифровать & amp; вернуться к & в JavaScript

Ответы: