Parse content from <title> tag with JavaScript

Question

My page looks like this

<head>
<title>story : cat</title>

Sometimes the title also looks like story | cat. This title is getting captured inside an anchor tag.

<a class="results" heref="www.hello.com" title="story : cat"/> 
<a class="results" heref="www.hello.com" title="story | cat"/>

How can I truncate the title value inside the anchor tag using javascript only to capture just the story-

<a class="results" heref="www.hello.com" title="story"/>

"This title is getting captured inside an anchor tag." How? — j08691
– j08691, Commented Dec 4, 2015 at 3:50
If your title always has "story" word as the first word and has a "space" after it, you may like to split the title by "space", and then return the first index. — Oki E. Rinaldi
– Oki E. Rinaldi, Commented Dec 4, 2015 at 3:54

Félix Saparelli · Accepted Answer · 2015-12-04 04:28:51Z

Split on the separator (use a simple regexp to split on either : or |) then pick the first part (and trim() it to remove extra spaces), assuming there is only ever two parts, and if there is more, that only the first is of interest:

"story : cat".split(/[:|]/)[0].trim() //=> 'story'
"story | cat".split(/[:|]/)[0].trim() //=> 'story'
"dog : cat".split(/[:|]/)[0].trim() //=> 'dog'
"story : chapter : cat".split(/[:|]/)[0].trim() //=> 'story'

Also works on multi-word first parts and with punctuation other than : and |:

"once upon a story : cat".split(/[:|]/)[0].trim() //=> 'once upon a story'
"hey! a story? : cat".split(/[:|]/)[0].trim() //=> 'hey! a story?'
"ß—¯±× : cat".split(/[:|]/)[0].trim() //=> 'ß—¯±×'
"物語 : 猫".split(/[:|]/)[0].trim() //=> '物語'

Here's a few examples with potentially problematic inputs, for evaluating the effectiveness of this answer.

If the title is empty or does not contain : or |:

"".split(/[:|]/)[0].trim() //=> ''
"foo bar".split(/[:|]/)[0].trim() => 'foo bar'

If the title contains only (any number of) ::

":".split(/[:|]/)[0].trim() //=> ''
":::".split(/[:|]/)[0].trim() //=> ''
"|".split(/[:|]/)[0].trim() //=> ''
"|||||".split(/[:|]/)[0].trim() //=> ''
" : : : ".split(/[:|]/)[0].trim() //=> ''
" : | : | : ".split(/[:|]/)[0].trim() //=> ''
":|:|:".split(/[:|]/)[0].trim() //=> ''

Comparing to other answers:

substring(0, 5)

"story : cat" -> "story"
"story | cat" -> "story"
"dog : cat" -> "dog :"
"story : chapter : cat" -> "story"
"once upon a story : cat" -> "once "
"hey! a story? : cat" -> "hey! "
"ß—¯±× : cat" -> "ß—¯±×"
"物語 : 猫" -> "物語 : "
"" -> ""
"foo bar" -> "foo b"
":" -> ":"
":::" -> ":::"
"|" -> "|"
"|||||" -> "|||||"
" : : : " -> " : : "
" : | : | : " -> " : | "
":|:|:" -> ":|:|:"

/^\w+/ using `.match()`

"story : cat" -> "story"
"story | cat" -> "story"
"dog : cat" -> "dog"
"story : chapter : cat" -> "story"
"once upon a story : cat" -> "once"
"hey! a story? : cat" -> "hey"
"ß—¯±× : cat" -> ""
"物語 : 猫" -> ""
"" -> ""
"foo bar" -> "foo"
":" -> ""
":::" -> ""
"|" -> ""
"|||||" -> ""
" : : : " -> ""
" : | : | : " -> ""
":|:|:" -> ""

/^\w+/ using `.replace()`

"story : cat" -> "story"
"story | cat" -> "story"
"dog : cat" -> "dog"
"story : chapter : cat" -> "story"
"once upon a story : cat" -> "once"
"hey! a story? : cat" -> "hey"
"ß—¯±× : cat" -> "ß—¯±× : cat"
"物語 : 猫" -> "物語 : 猫"
"" -> ""
"foo bar" -> "foo"
":" -> ":"
":::" -> ":::"
"|" -> "|"
"|||||" -> "|||||"
" : : : " -> " : : : "
" : | : | : " -> " : | : | : "
":|:|:" -> ":|:|:"

substring(.indexOf(':') + 1)

"story : cat" -> " cat"
"story | cat" -> "story | cat"
"dog : cat" -> " cat"
"story : chapter : cat" -> " chapter : cat"
"once upon a story : cat" -> " cat"
"hey! a story? : cat" -> " cat"
"ß—¯±× : cat" -> " cat"
"物語 : 猫" -> " 猫"
"" -> ""
"foo bar" -> "foo bar"
":" -> ""
":::" -> "::"
"|" -> "|"
"|||||" -> "|||||"
" : : : " -> " : : "
" : | : | : " -> " | : | : "
":|:|:" -> "|:|:"

split and .pop()

Functionally equivalent to mine, except without the .trim().

"story : cat" -> " cat"
"story | cat" -> " cat"
"dog : cat" -> " cat"
"story : chapter : cat" -> " cat"
"once upon a story : cat" -> " cat"
"hey! a story? : cat" -> " cat"
"ß—¯±× : cat" -> " cat"
"物語 : 猫" -> " 猫"
"" -> ""
"foo bar" -> "foo bar"
":" -> ""
":::" -> ""
"|" -> ""
"|||||" -> ""
" : : : " -> " "
" : | : | : " -> " "
":|:|:" -> ""

Community · Accepted Answer · 2017-05-23 10:30:40Z

1

Based on the answer in this post How to remove part of a string before a ":" in javascript?

You can use one of these methods easily:

var str = document.getElementsByClassName('results')[0].getAttribute("title"); //Use loop for other indexes 
str = str.substring(str.indexOf(":") + 1);

OR

var str = document.getElementsByClassName('results')[0].getAttribute("title"); //Use loop for other indexes
str = str.split(":").pop();

This solution is more scalable because you don't hardcode the index in which the Colon or the | character is located. You use functions to locate it, so you can later change the keyword and it will still work.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Dec 4, 2015 at 3:53

Juan Bonnett

1,8561 gold badge19 silver badges33 bronze badges

Comments

Jessie Chua · Accepted Answer · 2015-12-04 03:51:40Z

1

You may try to use the substring method. Pass your title into a var then substring it.

var str = "story : cat";

var res = str.substring(0, 5);

answered Dec 4, 2015 at 3:51

Jessie Chua

432 silver badges6 bronze badges

Comments

RobG · Accepted Answer · 2015-12-04 03:58:48Z

1

You can get the title of the page using:

document.title;

You can get the first word of the title using:

var titleFirstWord = document.title.replace(/(^\w+).*/,'$1');

I don't know how you want to get a reference to the link, but once you've done that, you can use:

linkRef.title = titleFirstWord.

Here's an example. Hover over the link to see what the title has been set to.

  
    var titleFirstWord = document.title.replace(/(^\w+).*/,'$1');
    document.links[0].title = titleFirstWord;

<head>
  <title>story : cat</title>
</head>
<a href="http://www.foo.com" title="whatever">whatever</a>

answered Dec 4, 2015 at 3:58

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

guest271314 · Accepted Answer · 2015-12-04 03:59:35Z

1

Try using String.prototype.match() with RegExp /^\w+/ to match 0 or more word characters at beginning of document.title ; also substituting href for heref at a element

document.querySelector(".results")
.setAttribute("title", document.title.match(/^\w+/))

<head>
<title>story : cat</title>
  </head>
<a class="results" href="www.hello.com" title="">title</a>

answered Dec 4, 2015 at 3:59

guest271314

1

Comments

Félix Saparelli · Accepted Answer · 2015-12-04 04:01:13Z

1

You can do like this:

var results = documet.getElementsByTagName("results")[0].getAttribute("title");
var str = results.substring(0,5);
var str2 = results.slice(0,5);

edited Dec 4, 2015 at 4:01

Félix Saparelli

8,7596 gold badges55 silver badges68 bronze badges

answered Dec 4, 2015 at 3:52

yaochiqkl

4991 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Parse content from <title> tag with JavaScript

6 Answers 6

substring(0, 5)

/^\w+/ using `.match()`

/^\w+/ using `.replace()`

substring(.indexOf(':') + 1)

split and .pop()

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

substring(0, 5)

/^\w+/ using .match()

/^\w+/ using .replace()

substring(.indexOf(':') + 1)

split and .pop()

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

/^\w+/ using `.match()`

/^\w+/ using `.replace()`