Question

我想获得以下代码中提到的div的长度：

<div id="txt">Hello <img src="..."> <b>Emoji</b> </div>

我使用这些jquery代码（所有字符的计数，包括img代码）：

var mylength= $("#txt").html().length;

图像是必须计数的表情符号2.因此，不是每个img，计数必须是2而不是实际长度。我怎么能这样做？

注意：它必须按原样计算其他标签（例如：<b>A</b>为8）。只有img个标记必须计为2。

jsfiddle：https://jsfiddle.net/rpknphym/1/

Answer 1

试试这个。删除img标签并在剩余的html长度中添加img标签长度

var copy= $("#txt").clone();
var count = $(copy).find("img").length;
$(copy).find("img").remove();
// it must be 21 = 12 (text chars) + 7 (b tag) + 2 (img tag)
console.log(copy.html().length + count * 2); // img tag counts for 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="txt">Hello<img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.4/assets/png/1f61b.png"> <b>Emoji</b> </div>

Answer 2

将HTML另存为变量：

video_insights

然后，用2个字符长的内容替换所有图像标签

var html=$('#text').html();

然后你可以用

找到它的长度

html = html.replace(/<img\ssrc\="[a-zA-Z\/:\.0-9\?\&\=\-_]+">/g,'im');

＆＃13;

var len=html.length;

＆＃13;

var html = $('#text').html();

html = html.replace(/<img\ssrc\="[a-zA-Z\/:\.0-9\?\&\=\-_]+">/g, 'im');
var len = html.length;
$('#text').text(html);

＆＃13;

Answer 3

这可以解释多个img标签。

var mylength = $("#txt").html().length; 
$("img","#txt").each(function() { mylength -= this.outerHTML.length - 2;});

Your fiddle, forked.

得到没有img标签的div的长度

3 个答案: