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[''] + '';

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