У меня есть строка, которая содержит текст 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 & Sample</a>
</li>
<li>
<a class="className2" id="idValue2" tabindex="2">Test & Sample2</a>
</li>
</ul>
с изменением тегов.
Это может быть обработано с HTML DOM и JavaScript?
(См. Ниже ответ на вопрос, обновленный комментариями из OP ниже)
Можно ли с этим справиться с помощью HTML DOM и javascript?
Нет, как только текст находится в DOM, концепция «побега» от него не применяется. Исходный текст HTML необходимо экранировать, чтобы он правильно анализировался в DOM; как только он находится в DOM, от него никуда не деться.
Это может быть немного сложно понять, поэтому давайте воспользуемся примером. Вот исходный текст HTML (например, в HTML-файле, который вы просматриваете в своем браузере):
<div>This & That</div>
После того, как браузер проанализировал его в DOM, текст в div будет Это & Это
, потому что &
было интерпретировано в этот момент.
Таким образом, вам нужно уловить это раньше, прежде чем текст будет проанализирован в DOM браузером. Вы не можете справиться с этим постфактум, уже слишком поздно.
По отдельности, строка, с которой вы начинаете, недействительна, если в ней есть такие вещи, как
. Предварительная обработка этой недопустимой строки будет сложной задачей. Вы не можете просто использовать встроенные функции вашей среды (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": " ",
"161": "¡",
"162": "&#cent;",
"163": "&#pound;",
"164": "&#curren;",
"165": "&#yen;",
"166": "&#brvbar;",
"167": "&#sect;",
"168": "&#uml;",
"169": "©",
// ...and lots and lots more, see http://www.w3.org/TR/REC-html40/sgml/entities.html
"8364": "€" // 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": " ",
"161": "¡",
"162": "&#cent;",
"163": "&#pound;",
"164": "&#curren;",
"165": "&#yen;",
"166": "&#brvbar;",
"167": "&#sect;",
"168": "&#uml;",
"169": "©",
// ...and lots and lots more, see http://www.w3.org/TR/REC-html40/sgml/entities.html
"8364": "€" // 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: © Yen: ¥ Cedilla: ¸ Surrogate pair: 𐀀</div>
<input type='button' id='btnGo' value='Go' onclick="return go();">
</body>
</html>
Здесь я включил седилью в качестве примера преобразования в числовую сущность, а не в именованную (поскольку я оставил cedil
из моего очень маленького примера карты) . И обратите внимание, что суррогатная пара в конце отображается в первом предупреждении как два «символа» из-за того, как JavaScript обрабатывает UTF-16.
Вы пробовали использовать функцию escape() в Javascript? JavaScript escape() функция
Какой серверный язык вы используете?
если вы используете PHP, вы можете использовать htmlentities
Пример:
<?php
$myHTML = "<h1>Some HTML Tags</h1><br />";
echo htmlentities($myHTML);
?>