Mam tekst z wieloma tagami i formatowaniem w ten sposób:

<u>
  1
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">2</span>
    <span class="Raleway">34</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
    6
  </i>
</u>

Zadaniem jest zastąpienie tekstu za pomocą JS lub jQuery, ale trzymaj wszystkie formatowanie i znaczniki. Na przykład zastąp bieżący "123456" z "ABCDEF". Liczba znaków jest zawsze taki sam. Rezultat powinien być:

<u>
  a
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">b</span>
    <span class="Raleway">cd</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">e</span>
    f
  </i>
</u>

Nie mam dobrego pomysłu, jak to rozwiązać, więc cieszę się, że otrzymam jakąkolwiek pomoc.

2
Sergey Shambal 25 czerwiec 2017, 13:41

3 odpowiedzi

Najlepsza odpowiedź

Powinno to działać z dowolnym ciągiem:

function isTextNode (node) {
  return node.nodeType === Node.TEXT_NODE;
}

function walkTextNodes (node, fn) {
  var children = node.childNodes;
  for (var i = 0; i < children.length; i++) {
    var child = children.item(i);
    if (isTextNode(child)) {
      fn(child);
    } else {
      walkTextNodes(child, fn);
    }
  }
}

function replaceContents (string) {
  var index = 0;          // the current index in the string
  
  walkTextNodes(container, function (node) {
    var text = node.nodeValue.trim();
    var length = text.length;
    node.nodeValue = string.slice(index, index + length);
    index += length;
  });
}

var container = document.querySelector('#container');
var input = document.querySelector('input');
var button = document.querySelector('button');

button.addEventListener('click', function () {
  var string = input.value; // the new string
  replaceContents(string);
});
<div id="container">

  <u>
    1
    <span style="color: rgb(255, 0, 0);">
      <span style="font-size: 45px;">2</span>
      <span class="Raleway">34</span>
    </span>
    <i>
      <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
      6
    </i>
  </u>
  
</div>

<input type="text" placeholder="Enter the new string">
<button>Replace</button>
0
PeterMader 26 czerwiec 2017, 15:46

Tam masz rozwiązanie.

Mam nadzieję, że działa dobrze dla ciebie!

var originals = ['1','2','3','4','5','6'];
var replacers = ['a','b','c','d','e','f'];
var html_content = $("u").html();

for(const [index, item] of originals.entries()) {
  var regEx = new RegExp("(" + item + ")(?!([^<]+)?>)", "gi");
  
  html_content = html_content.replace(regEx, replacers[index]);
} 

$("u").html(html_content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<u>
  1
  <span style="color: rgb(255, 0, 0);">
    <span style="font-size: 45px;">2</span>
    <span class="Raleway">34</span>
  </span>
  <i>
    <span style="color: rgb(255, 0, 0);" class="Raleway">5</span>
    6
  </i>
</u>
0
JV Lobo 25 czerwiec 2017, 11:56

Zrobiłbym to:

 var fullHtml = $("u").html(); //This returns a string
 fullHtml = fullHtml.replace("1","a");
 fullHtml = fullHtml.replace("2","b");
 fullHtml = fullHtml.replace("3","c");
 fullHtml = fullHtml.replace("4","d");

 $("u").html(fullHtml);

Możesz także poprawić, używając pętli:

 var alphabet = ["", "a","b","c","d","e"];
 var fullHtml = $("u").html(); //This returns a string
 for(var i=1; i<6; i++){
      fullHtml = fullHtml.replace(""+i,alphabet[i]);
 }
 $("u").html(fullHtml);
0
Sampgun 25 czerwiec 2017, 10:51