ansaurus

Question

How to only modify "text" while modifying the dom using javascript

Answer 1

+6 A:

Wouldn't adding:

.unbreakable {
    white-space: pre;
}

… to your stylesheet be easier?

David Dorward 2009-10-16 06:31:58

+1, and note: if you don't want all of the behaviors of pre-formatted whitespace (new lines in text treated as line breaks rather than spaces), you can safely use the CSS rule in conjunction with `$('.unbreakable').html($('.unbreakable').html().replace(/\r?\n|\r/g, ' '));`

eyelidlessness 2009-10-16 06:43:55

Yes it would be easier. I'm gonna go with Jeff Meatball's nowrap (didn't know that existed actually). It looks like it works more like I expect.

B T 2009-10-16 07:10:59

Just to let you know also, pre doesn't work in IE. Damn microsoft to hell. +1 btw.

B T 2009-10-16 07:24:24

Answer 2

A:

[edit] fixed in response to a comment. This is probably not IE-compatible; haven't tested on anything other than Firefox. C.f. How do I select text nodes with jQuery.

<script language="JavaScript" type="text/javascript" src="jquery.js" ></script>
<link rel="stylesheet" href="styledButton.css" type="text/css" >

<script type="text/javascript">
  $(document).ready(function () {
    var NBSP = '\u00a0';
    $(".unbreakable").css("border", "solid red 1px").contents().each(function(x){
      if (this.nodeType == Node.TEXT_NODE) {
        this.nodeValue = this.nodeValue.replace(/ /g, NBSP);
      }
    });
  } );
</script>
</head>

<body>

<div id="log" style="width: 10px">
  <span class="unbreakable">testing <span title="Moo">XXX YYY</span> testing 1 2 3</span>
  <span class="breakable">(Now this is a breakable span)</span>
  <span class="unbreakable">testing again...</span>
</div>

<div id="A"></div>

</body>

Nickolay 2009-10-16 06:54:42

http://jsbin.com/iqese

Mark 2009-10-16 07:05:42

Thanks for all the effort, but it doesn't work. I tried<span class="unbreakable">testing <span title="Moo">yeah</span> testing 1 2 3</span>and the title didn't work (indicating its replacing spaces in the inner tags)

B T 2009-10-16 07:08:08

gah, sorry, careless reading on my part. In any case the CSS solution is better if it suits you, I was just practicing in jQuery :)

Nickolay 2009-10-16 07:20:45

Answer 3

+3 A:

Good direction with the CSS. How about nowrap?

.unbreakable { white-space: nowrap; }

Jeff Meatball Yang 2009-10-16 06:54:50

Great solution. Didn't know white-space existed. I still would love to see a way to avoid tags like i was looking for.. I'm sure i'll run across the need some day. Thanks!

B T 2009-10-16 07:12:06

ansaurus

tags:

views:

answers:

How to only modify "text" while modifying the dom using javascript

related questions