有没有一种方法可以将HTML转换为普通文本,而不用使用Jquery将其实际写入选择器?

efzxgjgh  于 2023-03-01  发布在  jQuery
关注(0)|答案(9)|浏览(131)

到目前为止我理解在Jquery中,用html()函数,我们可以把HTML转换成文本,比如,

$("#myDiv").html(result);

将"result"(html代码)转换为普通文本并在myDiv中显示。
现在,我的问题是,有没有一种方法可以简单地转换html并将其放入变量中?
例如:

var temp;
temp = html(result);

像这样的东西,当然这是行不通的,但是我怎么能把转换成一个变量而不把它写在屏幕上呢?因为我在循环中检查转换,我认为如果每一个循环都把它写在屏幕上,这是相当浪费资源的。

    • 编辑:**

很抱歉造成了混淆,例如,如果result是" <p>abc</p> ",那么$(#mydiv).html(result)会使mydiv显示"abc",它通过移除<p>标签将html "转换"为普通文本。那么,我如何才能将"abc"放入变量中而不执行类似var temp=$(#mydiv).text()的操作呢?

mitkmikd

mitkmikd1#

下面是无jQuery解决方案:

function htmlToText(html) {
    var temp = document.createElement('div');
    temp.innerHTML = html;
    return temp.textContent; // Or return temp.innerText if you need to return only visible text. It's slower.
}

在IE ≥9时效果很好。

mbskvtky

mbskvtky2#

不,html方法不会将HTML代码转换为文本,而是将HTML代码转换为DOM元素,浏览器会解析HTML代码并从中创建元素。
你不需要把HTML代码放到页面中,就可以把它解析成元素,你可以在一个独立的元素中完成:

var d = $('<div>').html(result);

现在您有了一个jQuery对象,其中包含一个div元素,该元素将解析后的HTML代码中的元素作为子元素。

var d = $(result);

现在,您有了一个jQuery对象,其中包含来自解析后的HTML代码的元素。

zfciruhq

zfciruhq3#

您可以简单地剥离所有HTML标记:

var text = html.replace(/(<([^>]+)>)/g, "");
ljsrvy3e

ljsrvy3e4#

为什么不使用.text()

$("#myDiv").html($(result).text());
yzckvree

yzckvree5#

您可以尝试:

var tmp = $("<div>").attr("style","display:none");
var html_text = tmp.html(result).text();
tmp.remove();

但是使用正则表达式修改字符串的方法更简单,因为它不使用DOM遍历。
你可以用regexp替换html到文本字符串,就像用户Crozin的回答。

  • P.S. * 您也可能喜欢<br>替换为换行符的方式:
var text = html.replace(/<\s*br[^>]?>/,'\n')
            .replace(/(<([^>]+)>)/g, "");
p4tfgftt

p4tfgftt6#

变量temp = $(您的选择器).html();
变量temp是包含HTML的字符串

vx6bjr1n

vx6bjr1n7#

$("#myDiv").html(result);没有将文本格式化为html代码。您可以使用.html()来做一些事情。
如果你说$("#myDiv").html();,你没有传递参数给'html()'函数,那么你就是在“获取”当前在div元素中的html。

var whatsInThisDiv = $("#myDiv").html();
console.log(whatsInThisDiv); //will print whatever is nested inside of <div id="myDiv"></div>

如果你在.html()调用中传入一个参数,你将把html设置成你传入的变量或字符串中存储的内容。

var htmlToReplaceCurrent = '<div id="childOfmyDiv">Hi! Im a child.</div>';
$("#myDiv").html(htmlToReplaceCurrent);

会让你的地盘变成这样...

<div id="myDiv">
    <div id="childOfmyDiv">Hi! Im a child.</div>
</div>
p1tboqfb

p1tboqfb8#

最简单、安全的解决方案-使用Dom Parser

对于更高级的用法-我建议您尝试Dompurify
它是跨浏览器的(并支持节点js)。只有19 kb的gzip
下面是我创建的将HTML转换为文本的fiddle

const dirty = "Hello <script>in script<\/script> <b>world</b><p> Many other <br/>tags are stripped</p>";
const config = { ALLOWED_TAGS: [''], KEEP_CONTENT: true, USE_PROFILES: { html: true }  };
// Clean HTML string and write into the div
const clean = DOMPurify.sanitize(dirty, config);
document.getElementById('sanitized').innerText = clean;

输入:Hello <script>in script<\/script> <b>world</b><p> Many other <br/>tags are stripped</p>
输出:Hello world Many other tags are stripped

brccelvz

brccelvz9#

使用dom有几个缺点。在其他答案中没有提到的一个:将加载媒体,导致网络流量。
我建议在将某些标记(如br、p、ol、ul和header)替换为\n换行符之后,使用正则表达式删除这些标记。

相关问题