Hướng dẫn add html tag in string - thêm thẻ html vào chuỗi

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

hello

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

    h
    e
    l
    l
    o

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) {
       $('', {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

168K38 Huy hiệu vàng257 Huy hiệu bạc 306 Huy hiệu đồng38 gold badges257 silver badges306 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 = '' + (div.textContent || div.innerText).split('').join('<\/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 138K3030 gold badges170 silver badges207 bronze badges

3

Mã HTML

hello

Mã JS

$(function(){
    var str= $('div#str').html();
    for(var i=0; i'+str[i]+'');
    }
});

Đã 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($(''+ val +''));
});

Đã 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 '' + g1 + '';
});

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.5K29 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(""  + myStr[i] + "");
    }
});

Chọn văn bản

    h
    e
    l
    l
    o

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

    h
    e
    l
    l
    o

Đầ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

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

Tôi có thể sử dụng thẻ HTML trong JavaScript không?

Thẻ HTML được sử dụng để xác định tập lệnh phía máy khách (JavaScript).Phần tử chứa các câu lệnh script hoặc nó trỏ đến tệp tập lệnh bên ngoài thông qua thuộc tính SRC.. The

programming html HTML inside string

Reply 7 0 Chia sẻ