Как выйти из HTML

У меня есть строка, которая содержит текст HTML. Я должен выйти просто из строк и не тегов. Например, у меня есть строка, которая содержит,

<ul class="main_nav">
  <li>
    <a class="className1" id="idValue1" tabindex="2">Test & Sample</a>
  </li>
 <li>
  <a class="className2" id="idValue2" tabindex="2">Test & Sample2</a>
  </li>
</ul>

Как выйти просто из текста к,

<ul class="main_nav">
  <li>
    <a class="className1" id="idValue1" tabindex="2">Test &amp; Sample</a>
  </li>
  <li>
    <a class="className2" id="idValue2" tabindex="2">Test &amp; Sample2</a>
  </li>
</ul>

с изменением тегов.

Это может быть обработано с HTML DOM и JavaScript?

9
задан not a patch 1 October 2019 в 09:16
поделиться

3 ответа

(См. Ниже ответ на вопрос, обновленный комментариями из OP ниже)

Можно ли с этим справиться с помощью HTML DOM и javascript?

Нет, как только текст находится в DOM, концепция «побега» от него не применяется. Исходный текст HTML необходимо экранировать, чтобы он правильно анализировался в DOM; как только он находится в DOM, от него никуда не деться.

Это может быть немного сложно понять, поэтому давайте воспользуемся примером. Вот исходный текст HTML (например, в HTML-файле, который вы просматриваете в своем браузере):

<div>This &amp; That</div>

После того, как браузер проанализировал его в DOM, текст в div будет Это & Это , потому что & было интерпретировано в этот момент.

Таким образом, вам нужно уловить это раньше, прежде чем текст будет проанализирован в DOM браузером. Вы не можете справиться с этим постфактум, уже слишком поздно.

По отдельности, строка, с которой вы начинаете, недействительна, если в ней есть такие вещи, как

This & That
. Предварительная обработка этой недопустимой строки будет сложной задачей. Вы не можете просто использовать встроенные функции вашей среды (PHP или что-то еще, что вы используете на стороне сервера), потому что они также избегают тегов. Вам нужно будет выполнить обработку текста, извлекая только те части, которые вы хотите обработать, и затем запустив их в процессе экранирования. Этот процесс будет непростым. & , за которыми следует пробел, достаточно просто, но если в исходном тексте есть неэкранированные объекты, как узнать, экранировать их или нет? Считаете ли вы, что если строка содержит & , вы оставите ее в покое? Или превратить его в & ? (Что совершенно верно; это то, как вы показываете фактическую строку & на странице HTML.)

Что вам действительно нужно сделать, так это исправить основную проблему: то, что создает эти недопустимые, наполовину закодированные струны.


Изменить : из нашего потока комментариев ниже, вопрос полностью отличается от того, который казался из вашего примера (это не имеет критического значения).Подводя итог комментариям для тех, кто пришел к этому свежему, вы сказали, что получаете эти строки из WebKit innerHTML , и я сказал, что это странно, innerHTML должен кодировать & (и указал вам на пару из тестовых страниц , которые предполагали, что это так). Ваш ответ был:

Это работает для &. Но одна и та же тестовая страница не работает для таких объектов, как ©, ®, «и многих других.

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

Мы можем это сделать. Согласно спецификации , значениями символов в строке JavaScript являются UTF-16 (с использованием Unicode Нормализованная форма C ) и любое преобразование из исходной кодировки символов ( ISO 8859-1 , Windows-1252 , UTF-8, что угодно) выполняется до того, как его увидит среда выполнения JavaScript. (Если вы не на 100% уверены, что понимаете, что я имею в виду под кодировкой символов, стоит остановиться и прочитать Абсолютный минимум, который должен знать каждый разработчик программного обеспечения о Unicode и наборах символов (без оправданий !) Джоэла Спольски, затем возвращается.) Итак, это сторона ввода. На выходной стороне объекты HTML идентифицируют кодовые точки Unicode. Таким образом, мы можем надежно преобразовывать строки JavaScript в объекты HTML.

Дьявол, как всегда, кроется в деталях. JavaScript явно предполагает, что каждое 16-битное значение является символом (см. Раздел 8.4 в спецификации), хотя на самом деле это не так для UTF-16 - одно 16-битное значение может быть «суррогатом» (например, 0xD800), которое только имеет смысл в сочетании со следующим значением, что означает, что два «символа» в строке JavaScript на самом деле являются одним символом. Это не редкость для дальневосточных языков.

Таким образом, надежное преобразование, которое начинается со строки JavaScript и приводит к объекту HTML, не может предполагать, что «символ» JavaScript фактически равен символу в тексте, он должен обрабатывать суррогаты. К счастью, сделать это очень легко, потому что умные люди, определяющие Unicode, упростили его: первое суррогатное значение всегда находится в диапазоне 0xD800-0xDBFF (включительно), а второе суррогатное значение всегда находится в диапазоне 0xDC00-0xDFFF (включительно). Таким образом, каждый раз, когда вы видите пару «символов» в строке JavaScript, которая соответствует этим диапазонам, вы имеете дело с одним символом, определенным суррогатной парой. Формулы для преобразования пары суррогатных значений в значение кодовой точки приведены в приведенных выше ссылках, хотя и довольно тупо; Я считаю эту страницу гораздо более доступной.

Вооружившись всей этой информацией, мы можем написать функцию, которая будет принимать строку JavaScript и искать символы (реальные символы, длина которых может составлять один или два «символа»), которые вы, возможно, захотите превратить в сущности, заменяя их. с именованными объектами из карты или числовыми объектами, если у нас их нет на нашей именованной карте:

// A map of the entities we want to handle.
// The numbers on the left are the Unicode code point values; their
// matching named entity strings are on the right.
var entityMap = {
    "160": "&nbsp;",
    "161": "&iexcl;",
    "162": "&#cent;",
    "163": "&#pound;",
    "164": "&#curren;",
    "165": "&#yen;",
    "166": "&#brvbar;",
    "167": "&#sect;",
    "168": "&#uml;",
    "169": "&copy;",
    // ...and lots and lots more, see http://www.w3.org/TR/REC-html40/sgml/entities.html
    "8364": "&euro;"    // Last one must not have a comma after it, IE doesn't like trailing commas
};

// The function to do the work.
// Accepts a string, returns a string with replacements made.
function prepEntities(str) {
    // The regular expression below uses an alternation to look for a surrogate pair _or_
    // a single character that we might want to make an entity out of. The first part of the
    // alternation (the [\uD800-\uDBFF][\uDC00-\uDFFF] before the |), you want to leave
    // alone, it searches for the surrogates. The second part of the alternation you can
    // adjust as you see fit, depending on how conservative you want to be. The example
    // below uses [\u0000-\u001f\u0080-\uFFFF], meaning that it will match and convert any
    // character with a value from 0 to 31 ("control characters") or above 127 -- e.g., if
    // it's not "printable ASCII" (in the old parlance), convert it. That's probably
    // overkill, but you said you wanted to make entities out of things, so... :-)
    return str.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0000-\u001f\u0080-\uFFFF]/g, function(match) {
        var high, low, charValue, rep

        // Get the character value, handling surrogate pairs
        if (match.length == 2) {
            // It's a surrogate pair, calculate the Unicode code point
            high = match.charCodeAt(0) - 0xD800;
            low  = match.charCodeAt(1) - 0xDC00;
            charValue = (high * 0x400) + low + 0x10000;
        }
        else {
            // Not a surrogate pair, the value *is* the Unicode code point
            charValue = match.charCodeAt(0);
        }

        // See if we have a mapping for it
        rep = entityMap[charValue];
        if (!rep) {
            // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
            rep = "&#" + charValue + ";";
        }

        // Return replacement
        return rep;
    });
}

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

Я не использовал вышеупомянутое в производстве (я фактически написал это для этого ответа, потому что проблема меня заинтриговала), и он полностью поставляется без каких-либо гарантий.Я попытался обеспечить, чтобы он обрабатывал суррогатные пары, потому что это необходимо для дальневосточных языков, и их поддержка - это то, чем мы все должны заниматься сейчас, когда мир стал меньше.

Полный пример страницы:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript'>

// Make the function available as a global, but define it within a scoping
// function so we can have data (the `entityMap`) that only it has access to
var prepEntities = (function() {

    // A map of the entities we want to handle.
    // The numbers on the left are the Unicode code point values; their
    // matching named entity strings are on the right.
    var entityMap = {
        "160": "&nbsp;",
        "161": "&iexcl;",
        "162": "&#cent;",
        "163": "&#pound;",
        "164": "&#curren;",
        "165": "&#yen;",
        "166": "&#brvbar;",
        "167": "&#sect;",
        "168": "&#uml;",
        "169": "&copy;",
        // ...and lots and lots more, see http://www.w3.org/TR/REC-html40/sgml/entities.html
        "8364": "&euro;"    // Last one must not have a comma after it, IE doesn't like trailing commas
    };

    // The function to do the work.
    // Accepts a string, returns a string with replacements made.
    function prepEntities(str) {
        // The regular expression below uses an alternation to look for a surrogate pair _or_
        // a single character that we might want to make an entity out of. The first part of the
        // alternation (the [\uD800-\uDBFF][\uDC00-\uDFFF] before the |), you want to leave
        // alone, it searches for the surrogates. The second part of the alternation you can
        // adjust as you see fit, depending on how conservative you want to be. The example
        // below uses [\u0000-\u001f\u0080-\uFFFF], meaning that it will match and convert any
        // character with a value from 0 to 31 ("control characters") or above 127 -- e.g., if
        // it's not "printable ASCII" (in the old parlance), convert it. That's probably
        // overkill, but you said you wanted to make entities out of things, so... :-)
        return str.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0000-\u001f\u0080-\uFFFF]/g, function(match) {
            var high, low, charValue, rep

            // Get the character value, handling surrogate pairs
            if (match.length == 2) {
                // It's a surrogate pair, calculate the Unicode code point
                high = match.charCodeAt(0) - 0xD800;
                low  = match.charCodeAt(1) - 0xDC00;
                charValue = (high * 0x400) + low + 0x10000;
            }
            else {
                // Not a surrogate pair, the value *is* the Unicode code point
                charValue = match.charCodeAt(0);
            }

            // See if we have a mapping for it
            rep = entityMap[charValue];
            if (!rep) {
                // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
                rep = "&#" + charValue + ";";
            }

            // Return replacement
            return rep;
        });
    }

    // Return the function reference out of the scoping function to publish it
    return prepEntities;
})();

function go() {
    var d = document.getElementById('d1');
    var s = d.innerHTML;
    alert("Before: " + s);
    s = prepEntities(s);
    alert("After: " + s);
}

</script>
</head>
<body>
<div id='d1'>Copyright: &copy; Yen: &yen; Cedilla: &cedil; Surrogate pair: &#65536;</div>
<input type='button' id='btnGo' value='Go' onclick="return go();">
</body>
</html>

Здесь я включил седилью в качестве примера преобразования в числовую сущность, а не в именованную (поскольку я оставил cedil из моего очень маленького примера карты) . И обратите внимание, что суррогатная пара в конце отображается в первом предупреждении как два «символа» из-за того, как JavaScript обрабатывает UTF-16.

10
ответ дан 4 December 2019 в 08:32
поделиться

Вы пробовали использовать функцию escape() в Javascript? JavaScript escape() функция

-2
ответ дан 4 December 2019 в 08:32
поделиться

Какой серверный язык вы используете?

если вы используете PHP, вы можете использовать htmlentities

Пример:

<?php

$myHTML = "<h1>Some HTML Tags</h1><br />";
echo htmlentities($myHTML);

?>
-1
ответ дан 4 December 2019 в 08:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: