how to add a specific char at beginning of each line in div ? (javascript)

Question

I want to add char at beginning of each line in html element like :

<div id="container">
  <p>first part here !</p>
  but they is text here too
  <span>and bla bla bla</span>
  foo
  <p>bar</p>
  baz
</div>

expected

<div id="container">
  <p>#first part here !</p>
  #but they is text here too
  <span>#and bla bla bla</span>
  #foo
  <p>#bar</p>
  #baz
</div>

render : https://jsfiddle.net/wna21a1q/

how can I do that whith JS (or jQuery)?

Like :

$('#container').addAtEachLine('#')

You should not use a regular expression on HTML..... Bad advice — epascarello, Oct 02 '17 at 15:38
It's a bit tricky because you are talking about "lines" and not elements (the last '#baz' is an issue. Is it really what you want to do? In general, you should not assume that html nodes are placed on new lines. Why do you want to do that? — Olivier Liechti, Oct 02 '17 at 15:49
this will be even more tricky because text can break on a new line anywhere if there is not enough width to display it. — Christophe Le Besnerais, Oct 02 '17 at 15:53

score 4 · Answer 1 · answered Oct 02 '17 at 15:48

4

You can loop over contents:

$("div").contents().each( function () {
  if(this.nodeType==1) {  //is an element
    $(this).prepend(document.createTextNode("#"))
  } else if ($.trim(this.nodeValue).length){ //text node that is more than a return
    this.nodeValue = "#" + this.nodeValue;
  }
})

span { display: block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>first part here !</p>
  but they is text here too
  <span>and bla bla bla</span>
  foo
  <p>bar</p>
  baz
</div>

answered Oct 02 '17 at 15:48

epascarello

204,599
20
195
236

good but I have another problem, I don't see it before : its when the width of `#conatiner` is at 100px(for exemple) and if there is a text(s) too long for take only one line. In this case the symbol `#` is not added for "each line", you understand? – Matrix Oct 02 '17 at 15:52
1

Well that is really a different question than what I answered.... That is basically impossible to detect with code like this since word wrap in display does not have line breaks.... – epascarello Oct 02 '17 at 15:54
Probably would have to do something like https://stackoverflow.com/questions/3738490/finding-line-wraps – epascarello Oct 02 '17 at 15:55

score 0 · Answer 2 · answered Oct 02 '17 at 16:12

@epascarello has provided a super answer to this question already. I was playing around with it and found a way of condensing the code a bit further. Probably not everybody's favourite but it reduces the actual prepend-action to a single line:

$("div").contents().each((i,obj)=>{
  var p=['','innerHTML','','nodeValue'][obj.nodeType]; // pick method for text access
  var t=obj[p].trim();       // get text and remove surrounding blanks
  if(t.length) obj[p]='#'+t; // if text>"" prepend a "#"
})

span { display: block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>first part here !</p>
  but they is text here too
  <span>and bla bla bla</span>
  foo
  <p>bar</p>
  baz
</div>

quaerere · Answer 3 · 2018-01-28T14:31:33.103

and here my vanilla.js version.

var el = document.querySelector('div');

function addchar(item) {

  var childNodes = item.childNodes;
  var countNode = childNodes.length;

  for (var i = 0; i < countNode; i++) {
    if (childNodes[i].nodeType !== 3) {
      addchar(childNodes[i]);
    } else {
      if (childNodes[i].nodeValue.trim()) {
        childNodes[i].nodeValue = "# " + childNodes[i].nodeValue;
      }
    }
  }
}

addchar(el);

span {display:block}

    <div>
      <p>first part here !</p>
      but they is text here too
      <span>and bla bla bla</span>
      foo
      <p>bar</p>
      baz
    </div>

how to add a specific char at beginning of each line in div ? (javascript)

3 Answers3