如何在div的每一行开头添加一个特定的char？ （javacsript）

Question

我想在html元素的每行开头添加char，如：

{
"id": 5705376,
"title": "Satellite Installation",
"created_at": "2017-09-07T14:02:19.000Z",
"updated_at": "2017-09-07T14:02:19.000Z",
"customer_id": 3126803,
"way_points": [{
    "id": 7405587,
    "lat": -26.0578251,
    "lng": 28.02189520000002,
    "task_id": 5705376,
    "done": false,
    "allow_editing_inventory": true,
    "customer_contact_ids": [3126803],
    "customer": {
        "original_phone_number": null,
        "last_open_at": null,
        "last_order_at": null,
        "uploaded_profile_image": {
            "url": "/images/avatar.png"
        },
        "original_lat": null,
        "original_lng": null,
        "district": null,
        "house_number": null,
        "street": null
    },
    "full_address": "8 Anslow Ln, Bryanston, Sandton, 2191, South Africa"
}],
"customer": {
    "id": 3126803,
    "name": "Lance",
    "address": "8 Anslow Ln, Bryanston, Sandton, 2191, South Africa",
    "lat": -26.0578251,
    "lng": 28.0218952,
    "created_at": "2017-08-29T10:00:32.360Z",
    "updated_at": "2017-09-07T14:02:19.860Z",
    "phone": null,
    "merchant_id": 11221,
    "allow_login": false,
    "stripe_id": null,
    "original_phone_number": null,
    "last_open_at": null,
    "last_order_at": null,
    "uploaded_profile_image": {
        "url": "/images/avatar.png"
    },
    "original_lat": null,
    "original_lng": null,
    "house_number": null,
    "street": null
},
"late": false,
"external_id": "5705376",
"uuid": "28095e33-b30c-4e35-98d2-aae6ad428f66",
"dispatcher_id": null,
"team_ids": [12422],
"ready_to_execute": true,
"tip_driver_enabled": false,
"automatically_assigned": false,
"task_inventories": null,
"task_notes": null
}

预期

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

渲染：https://jsfiddle.net/wna21a1q/

我怎么能用JS（或jQuery）做到这一点？

喜欢：

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

Answer 1

你可以循环内容：

＆＃13;

＆＃13;

$("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;
  }
})

＆＃13;

span { display: block }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

@epascarello已经为这个问题提供了一个超级答案。我正在玩它，并找到了一种方法来进一步缩小代码。可能不是每个人都喜欢，但它会将实际的前置动作减少到一行：

$("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>

Answer 3

这里是我的vanilla.js版本。

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>