Извлеките текст из строки HTML с помощью JavaScript
11 Toshkuuu [2015-03-06 15:59:00]
Я пытаюсь получить внутренний текст строки HTML, используя JS-функцию (строка передается как аргумент). Вот код:
function extractContent(value) {
var content_holder = "";
for(var i=0;i<value.length;i++) {
if(value.charAt(i) === '>') {
continue;
while(value.charAt(i) != '<') {
content_holder += value.charAt(i);
}
}
}
console.log(content_holder);
}
extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
Проблема в том, что на консоли ничего не печатается (content_holder остается пустым). Я думаю, что проблема вызвана оператором "===".
javascript string html text extract
7 ответов
25 Решение Rick Hitchcock [2015-03-06 16:16:00]
Создайте элемент, сохраните в нем HTML и получите его textContent:
function extractContent(s) {
var span = document.createElement('span');
span.innerHTML = s;
return span.textContent || span.innerText;
};
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));Вот версия, которая позволяет вам иметь пробелы между узлами, хотя вы, вероятно, захотите это только для элементов уровня блока:
function extractContent(s, space) {
var span= document.createElement('span');
span.innerHTML= s;
if(space) {
var children= span.querySelectorAll('*');
for(var i = 0 ; i < children.length ; i++) {
if(children[i].textContent)
children[i].textContent+= ' ';
else
children[i].innerText+= ' ';
}
}
return [span.textContent || span.innerText].toString().replace(/ +/g,' ');
};
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>. Nice to <em>see</em><strong><em>you!</em></strong>"));
console.log(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>. Nice to <em>see</em><strong><em>you!</em></strong>",true));Версия одной строки (точнее, одна заявка):
function extractContent(html) {
return (new DOMParser).parseFromString(html, "text/html") .
documentElement . textContent;
}
2 Ahmer [2015-03-06 16:11:00]
используйте этот regax для удаления html-тегов и сохраните только внутренний текст в html
он показывает, что HelloW3c проверяет его только
var content_holder = value.replace(/<(?:.|\n)*?>/gm, '');
1 Sharique Ansari [2015-03-06 16:14:00]
Попробуйте следующее: -
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function extractContent(value){
var div = document.createElement('div')
div.innerHTML=value;
var text= div.textContent;
return text;
}
window.onload=function()
{
alert(extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>"));
};
</script>
</body>
</html>0 Mubeen Khan [2019-01-24 13:42:00]
textContext - очень хороший метод для достижения желаемых результатов, но иногда мы не хотим загружать DOM. Таким простым решением будет следующее регулярное выражение:
let htmlString = "<p>Hello</p><a href='http://w3c.org'>W3C</a>"
let plainText = htmlString.replace(/<[^>]+>/g, '');
-1 Adam MacDonald [2015-03-06 16:06:00]
Вы можете временно записать его на элемент уровня блока, который находится за пределами страницы. Некоторые вещи вроде этого:
HTML:
<div id="tmp" style="position:absolute;top:-400px;left:-400px;">
</div>
JavaScript:
<script type="text/javascript">
function extractContent(value){
var div=document.getElementById('tmp');
div.innerHTML=value;
console.log(div.children[0].innerHTML);//console out p
}
extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");
</script>
-3 Dane [2015-03-06 16:05:00]
вам нужен массив для хранения значений
function extractContent(value) {
var content_holder = new Array();
for(var i=0;i<value.length;i++) {
if(value.charAt(i) === '>') {
continue;
while(value.charAt(i) != '<') {
content_holder.push(value.charAt(i));
console.log(content_holder[i]);
}
}
}
}extractContent("<p>Hello</p><a href='http://w3c.org'>W3C</a>");