Hướng dẫn how to add html tag in string - cách thêm thẻ html trong chuỗi

Tôi có một chuỗi các chữ cái trong một div - chẳng hạn như ...

<div>hello</div>

Tôi muốn thêm thẻ HTML vào mỗi chữ cái trong chuỗi để nó sẽ như vậy - chẳng hạn như thế này

<div>
    <span>h</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
</div>

Vì các chữ cái trong div này sẽ thay đổi động, nên không thể tĩnh nên tôi muốn sử dụng jQuery để áp dụng nhịp cho mọi chữ cái của chuỗi.

Bất kỳ trợ giúp sẽ được đánh giá cao, cảm ơn!

Đã hỏi ngày 6 tháng 5 năm 2014 lúc 7:18May 6, 2014 at 7:18

1

Một vài bước:

1. Lấy nội dung văn bản và tạo một mảng các ký tự riêng lẻ,
2. Làm trống container ban đầu,
3. Thêm mỗi chữ cái dưới dạng một phần tử nhịp.

Mật mã:

$('div').each(function() {
    var letters = $(this).text().split(''),
    $container = $(this).empty();

    $.each(letters, function(_, letter) {
       $('<span>', {text: letter}).appendTo($container);
    });
});

Thử nghiệm

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:33May 6, 2014 at 7:33

Ja͢ckja͢ckJa͢ck

168K36 Huy hiệu vàng256 Huy hiệu bạc 305 Huy hiệu Đồng36 gold badges256 silver badges305 bronze badges

1

Bạn chỉ có thể phân chia TextContent sau đó tham gia một lần nữa với sự đánh dấu phù hợp được nhúng. Vì vậy, giả sử bạn có một tham chiếu đến div:

div.innerHTML = '<span>' + (div.textContent || div.innerText).split('').join('<\/span><span>') + '<\/span>';

Chỉnh sửa

Luôn luôn có một người giết người vui vẻ chỉ ra lỗ hổng rõ ràng !! Ok, đây là một cái gì đó mạnh mẽ hơn.

function spanizeText(element) {
  var text = (element.textContent || element.innerText).split('');
  element.innerHTML = '';

  text.forEach(function(c) {
    var sp = document.createElement('span');
    sp.appendChild(document.createTextNode(c));
    element.appendChild(sp);
  });
}

Nó đòi hỏi một polyfil cho foreach trong các trình duyệt cũ hoặc thay đổi foreach thành một vòng đơn giản (cùng một số dòng mã, có thể chạy nhanh hơn). Nó có thể được sửa đổi để chấp nhận một phần tử trình bao bọc được thiết lập với các thuộc tính và thuộc tính khác nhau được nhân bản thay vì sử dụng Document.CreateEement.

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:22May 6, 2014 at 7:22

RobgrobgRobG

Huy hiệu vàng 137K3030 gold badges167 silver badges205 bronze badges

3

Mã HTML

<div id="str">hello</div>
<div id="result">

</div>

Mã JS

$(function(){
    var str= $('div#str').html();
    for(var i=0; i<str.length; i++){
        $('div#result').append('<span>'+str[i]+'</span>');
    }
});

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:29May 6, 2014 at 7:29

Rohit Bathamrohit BathamRohit Batham

1.2381 Huy hiệu vàng9 Huy hiệu bạc13 Huy hiệu đồng1 gold badge9 silver badges13 bronze badges

Try,

var xDiv = $('div');
var xChars = $.trim(xDiv.text()).split('');
xDiv.empty();

$.each(xChars,function(i,val){
  xDiv.append($('<span>'+ val +'</span>'));
});

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:21May 6, 2014 at 7:21

4

Bạn cũng có thể làm điều này với Regex:

//var s = 'hello';
var s = $('#myDiv').html(); // get the string from the div

var newStr = s.replace(/(.)/gi, function(str, g1) {
    return '<span>' + g1 + '</span>';
});

alert(newStr);

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:29May 6, 2014 at 7:29

w00w00w00

Rohit Bathamrohit Batham29 gold badges100 silver badges147 bronze badges

1.2381 Huy hiệu vàng9 Huy hiệu bạc13 Huy hiệu đồngJSfiddle demoing one way to do this.

1. Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:21
2. Bạn cũng có thể làm điều này với Regex:
3. 25.4K29 Huy hiệu vàng100 Huy hiệu bạc147 Huy hiệu đồng

Đây là một bản demo của JSfiddle một cách để làm điều này.

// For all matching elements
$(string).each(function() {

    // Get contents of string
    var myStr = $(this).html();

    // Split myStr into an array of characters
    myStr = myStr.split("");

    // Append strings to the result div in spans
    for (var i = 0, len = myStr.length; i < len; i++) {
        $("#result").append("<span>"  + myStr[i] + "</span>");
    }
});

Chọn văn bản

<div>
    <span>h</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
</div>

Chia văn bản thành một mảng các chữ cáiMay 6, 2014 at 7:28

Lặp lại trên mảng và nối vào phần tử đíchaludvigsen

JQuery3 gold badges25 silver badges37 bronze badges

<div>
    <span>h</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
</div>

Đầu ra HTML

Đã trả lời ngày 6 tháng 5 năm 2014 lúc 7:29May 6, 2014 at 7:29

Rohit Bathamrohit BathamTiele Declercq

1.2381 Huy hiệu vàng9 Huy hiệu bạc13 Huy hiệu đồng2 gold badges27 silver badges38 bronze badges

Làm cách nào để thêm thẻ HTML trong HTML?

Thẻ chuỗi trong HTML là gì?

Chúng ta có thể sử dụng thẻ HTML trong Java không?