jquery input text with replace is not working

Question

I'm using jQuery tags input library in my angularJS project. On frontend side, I able to add the tags, but when I retrieve the texts for that input. It contains spaces in between the values. I tried to use replace function on the string variable, it doesn't work.

HTML

<input id="news_tags" data-js-tags-input="" type="text" name="example-tags1" value="" ng-model="news.tags" 
class="form-control ng-pristine ng-untouched ng-valid ng-empty" data-tagsinput-init="true" style="display: none;">

<div id="news_tags_tagsinput" class="tagsinput" style="width: 100%; min-height: 36px; height: 36px;">
  <span class="tag">
    <span>tag1&nbsp;&nbsp;</span>
    <a href="#" title="Removing tag">x</a>
  </span>
  <span class="tag">
    <span>tag2&nbsp;&nbsp;</span>
    <a href="#" title="Removing tag">x</a>
  </span>
  <div id="news_tags_addTag">
    <input id="news_tags_tag" value="" data-default="Add tag" style="color: rgb(102, 102, 102); width: 68px;">
  </div>
  <div class="tags_clear"></div>
</div>

Controller

var tags  = jQuery("#news_tags_tagsinput .tag span").text().trim();
alert((typeof tags)); // String
alert(tags.replace(" ", ",")); // tag1 tag2
alert(tags.replace(" ", ",")); // tag1 tag2
alert(tags.replace("&nbsp;", ",")); // tag1 tag2
alert(tags.replace("&nbsp;&nbsp;", ",")); // tag1 tag2

Output

tag1 tag2

Instead Of

tag1,tag2

Sovary · Accepted Answer · 2017-06-24 04:56:50Z

1

Change to pattern split string

var tags  = jQuery("#news_tags_tagsinput .tag span").text().trim();

alert(tags.split(/\s+/));

the regex means

\s = find whitespace character
+ = one or more characters

edited Jun 24, 2017 at 4:56

answered Jun 24, 2017 at 4:51

Sovary

7024 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JstnPwll · Accepted Answer · 2017-06-24 04:40:32Z

1

The jQuery plugin handles this for you. Instead of trying to get the tag spans manually, you should simply fetch the value of the underlying input:

jQuery("#news_tags").val() //comma-delimited list of tags

answered Jun 24, 2017 at 4:40

JstnPwll

8,7252 gold badges36 silver badges57 bronze badges

2 Comments

Abel Over a year ago

This will returns empty in my case because my input value is empty, and the plugin library only insert new div tag class everytime user inserts new tag.

JstnPwll Over a year ago

I looked at the plugin source. There is a function named updateTagsField which is called every time the user adds a tag. Even if your input is initialized with an empty value, calling .val() on it will return a comma-delimited list of the tags a user has added to it.

atomSmasher · Accepted Answer · 2017-06-24 05:33:19Z

1

var tags = jQuery("#news_tags_tagsinput .tag span").slice();
alert(tags[0].textContent.trim() + "," + tags[1].textContent.trim());

https://jsfiddle.net/j4d0ko17/

answered Jun 24, 2017 at 5:33

atomSmasher

1,4632 gold badges16 silver badges37 bronze badges

Comments

mukund · Accepted Answer · 2017-06-24 05:23:21Z

0

For angular js I recommend us angular library instead jquery. You can try with http://mbenford.github.io/ngTagsInput/

var tags  = jQuery("#news_tags_tagsinput .tag span").text().trim();
alert((tags.split(/\s+/)).join());

Though, I do not recommended split using space as any of tag contains space, will be considered as multiple tag instead single.

answered Jun 24, 2017 at 5:23

mukund

2,4431 gold badge21 silver badges32 bronze badges

Collectives™ on Stack Overflow

jquery input text with replace is not working

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related